<template>
	<!-- 提交订单 -->
	<view class="box" v-if="pageShow">
		<view class="anyone">
			<view class="item2" v-for="(item,index) in dataAll.goodsList" :key="index">
				<view class="flexleft">
					<view class="item2Left">
						<view class="">
							<image :src="item.goodsinfo.image_text" mode=""></image>
						</view>
					</view>
					<view class="item2Right">
						<view class="item2RightTop">
							<view class="t3">{{item.goodsinfo.name}}</view>
							<view class="flexbetween margin_top">
								<view class="xiaohuang" v-show="item.goods_sku_id==item.goodsinfo.biggoodsunit.id">
									{{item.goodsinfo.biggoodsunit.name}}
								</view>
								<view class="xiaohuang" v-show="item.goods_sku_id==item.goodsinfo.middlegoodsunit.id">
									{{item.goodsinfo.middlegoodsunit.name}}
								</view>
								<view class="xiaohuang" v-show="item.goods_sku_id==item.goodsinfo.smallgoodsunit.id">
									{{item.goodsinfo.smallgoodsunit.name}}
								</view>
								<view class="xiaohuang" v-if="orderData.order_type==1">{{item.price}}</view>
							</view>
						</view>
						<view class="item2RightBottom" >
							<view class="xiaohong bold">*{{item.num}}</view>
							<view class="xiaohong bold" style="color: #ff0000;" v-if="orderData.order_type==1">
								小计:￥{{(item.price*item.num)-Number(item.jian)}}</view>
							<view class="xiaohong bold" style="color: #ff0000;" v-if="orderData.order_type==2">
								{{item.total_payscore}}分</view>
						</view>
					</view>
				</view>
				<view class="flexbetween" style="margin-top: 23rpx;" v-if="orderData.order_type==1 && item.usecoupon.length" @click="yhqclick(item,index)">
					<view class="titletext">优惠券</view>
					<view class="flexright">
						<view class="titletext" style="margin-right: 10rpx;color: #95ec69;">
							{{item.user_coupon_id?"满"+item.man+"元减"+item.jian+"元":"点击选择优惠券"}}
						</view>
						<uni-icons type="right" size="20" color="#95ec69"></uni-icons>
					</view>
				</view>
			</view>
			<view class="flexbetween" style="margin-top: 23rpx;">
				<view class="titletext">实付款</view>
				<view class="item2RightBottomRight" v-if="orderData.order_type==1">{{Number(dataAll.x_total_price).toFixed(2)}}</view>
				<view class="item2RightBottomRight" v-if="orderData.order_type==2">{{Number(dataAll.x_total_payscore).toFixed(2)}}分</view>
			</view>
			<view class="anyone2">
				<view class="anyone2Left" v-if="orderData.order_type==1">
					<view class="">
						合计：共{{dataAll.x_total_goods_price}}元优惠{{dataAll.discount_price}}元
					</view>
					<view class="">
						{{dataAll.x_goods_zl_num}}种{{dataAll.x_goods_num}}件赠送{{dataAll.x_total_score}}分
					</view>
				</view>
				<view class="anyone2Left" v-if="orderData.order_type==2">
					合计：共{{dataAll.x_total_payscore}}分{{dataAll.x_goods_zl_num}}种{{dataAll.x_goods_num}}件
				</view>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="strongtext "  style="min-width: 120rpx;">配送方式</view>
			<u-radio-group style="flex: 0;" v-model="ps_type" placement="row" circle>
				<u-radio activeColor="#f5ac4f" :customStyle="{marginRight: '30rpx'}" label="自提" name="1"></u-radio>
				<u-radio activeColor="#f5ac4f" label="送货" name="2"></u-radio>
			</u-radio-group>
		</view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="strongtext"  style="min-width: 200rpx;">是否开具发票</view>
			<u-radio-group v-model="kjfp_type" placement="row" circle>
				<u-radio activeColor="#f5ac4f" :customStyle="{marginRight: '30rpx'}" label="是" name="1"></u-radio>
				<u-radio activeColor="#f5ac4f" label="否" name="2"></u-radio>
			</u-radio-group>
		</view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="strongtext" style="min-width: 200rpx;">交货开始日期</view>
			<view class="flexright" @click="messageTime.timeShow = true;timetype=1">
				<input type="text" placeholder="请选择" v-model="jh_time" disabled="" class="strongtext margin_right" style="text-align: right;">
				<u-icon name="arrow-right" color="#999" size="20"></u-icon>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="strongtext" style="min-width: 200rpx;">交货结束日期</view>
			<view class="flexright" @click="messageTime.timeShow = true;timetype=2">
				<input type="text" placeholder="请选择" v-model="jh_endtime" disabled="" class="strongtext margin_right" style="text-align: right;">
				<u-icon name="arrow-right" color="#999" size="20"></u-icon>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius">
			<view class="strongtext">备注</view>
			<textarea class="textarea mainpadding radius margin_top" placeholder="请输入备注信息"
				v-model="notes"></textarea>
		</view>
		<view class="btn" @click="payOk">确定</view>
		<u-popup :show="show" :round="10" mode="bottom" @close="show=false">
			<view class="mainpadding">
				<view class="titletext flexcenter">点击选择优惠券</view>
				<scroll-view scroll-y="true" class="scroll-Y" :show-scrollbar="false" v-if="couponData.length">
					<view class="hongbao" v-for="item in couponData" :key="item.id" @click="selectyhq(item)">
						<view class="top">
							<view class="p1"></view>
							<view class="p2"></view>
							<view class="topLeft">
								<view class="t1">{{item.price}}</view>
								<view class="t1right">
									<view class="r1 fw">元</view>
									<view class="r2">满{{item.mj_price}}元减{{item.price}}元</view>
									<!-- <view class="fw" style="font-size: 32rpx;">{{item.name}}</view> -->
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 如果没有优惠券 -->
				<view class="flexcolumn" v-if="!couponData.length">
					<view class="kongtu">
						<image src="../../static/userOrder/kongyouhuiquan.png" mode="widthFix"></image>
					</view>
					<view class="kongtext">
						<text>暂无可用优惠券</text>
					</view>
				</view>
			</view>
		</u-popup>
		<timePicker :messageTime="messageTime" @timeConfirm="timeConfirm" @timeCancel="messageTime.timeShow=false"></timePicker>
	</view>
</template>

<script>
	const httpRequest = require("@/commonFun/httpRequest.js");
	export default {
		data() {
			return {
				pageShow: false,
				show: false,
				// 分页处理数据
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				jifen: true,
				yhData: {}, //优惠数据
				couponData: [], //优惠券数据
				currenprice: "", //当前选择优惠券商品的总金额
				currenindex: "", //当前选择优惠券商品的下标
				
				orderData: {},
				ps_type: "1", //配送方式1=自提,2=送货
				notes:"",//备注
				kjfp_type:"1",//是否开具发票1=是,2=否
				jh_time:"",
				jh_endtime:"",
				dataAll: {},
				messageTime:{
					timeShow:false,
					title:"交货日期",
					mode:"datetime"
				},
				timetype:1,
			};
		},
		onLoad(options) {
			let _this = this;
			this.orderData = JSON.parse(decodeURIComponent(options.data));
			this.getorderSure()
			if(uni.getStorageSync('ps_type')){
				this.ps_type = uni.getStorageSync('ps_type')
			}
			if(uni.getStorageSync('kjfp_type')){
				this.kjfp_type = uni.getStorageSync('kjfp_type')
			}
		},
		onShow() {
			// this.getConpoun();
			let _this = this;
			uni.$off('address');
			uni.$on('address', (data) => {
				_this.getaNewAdd(data); //根据id获取地址详情
			});
		},
		methods: {
			timeConfirm(e){
				this.messageTime.timeShow = false
				if (this.timetype == 1) {
					this.jh_time = e
				} else {
					this.jh_endtime = e
				}
			},
			getorderSure() {
				httpRequest.request('/customapi/Saleorder/sure', 'POST', {
					ps_type: this.ps_type,
					order_type: this.orderData.order_type,
					data: this.orderData.data
				}).then(res => {
					if(res.code==1){
						if(this.dataAll.goodsList){
							let goodsList = this.dataAll.goodsList
							this.dataAll = res.data
							this.dataAll.goodsList = goodsList
						}else{
							this.dataAll = res.data
						}
						this.pageShow = true
					}else{
						httpRequest.toast(res.msg)
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}
					
				})
			},
			// 优惠券点击
			yhqclick(item, index) {
				this.show = true
				this.currenindex = index
				let arr = JSON.parse(JSON.stringify(item.usecoupon))
				arr.forEach((item,index)=>{
					this.dataAll.goodsList.forEach(ite=>{
						if(ite.user_coupon_id == item.id){
							arr.splice(index,1)
						}
					})
				})
				this.couponData = arr
			},
			selectyhq(item) {
				this.dataAll.goodsList[this.currenindex].user_coupon_id = item.id
				this.orderData.data[this.currenindex].user_coupon_id = item.id
				this.dataAll.goodsList[this.currenindex].man = Number(item.mj_price)
				this.dataAll.goodsList[this.currenindex].jian = Number(item.price)
				this.show = false
				this.getorderSure()
			},
			payOk() {
				let _this = this;
				
				let data = {
					notes:this.notes,
					ps_type:this.ps_type,
					kjfp_type:this.kjfp_type,
					jh_time:this.jh_time,
					order_type: this.orderData.order_type,
					data: this.orderData.data,
					jh_endtime:this.jh_endtime
				}
				if(this.orderData.ly_type=="1"){
					this.$set(data,"is_cxhd",1)
					this.$set(data,"buy_cxhd_num",this.orderData.buy_cxhd_num)
					this.$set(data,"activity_id",this.orderData.activity_id)
				}
				uni.setStorageSync("kjfp_type",this.kjfp_type)
				uni.setStorageSync("ps_type",this.ps_type)
				httpRequest.request('/customapi/Saleorder/addSaleOrder', 'POST', data).then(res => {
					if(res.code==-1){
						httpRequest.toast(res.msg)
						setTimeout(()=>{
							uni.navigateTo({
								url:"/pages/user/uiserInfo"
							})
						},500)
					}else if(res.code==1 ){
						if(this.orderData.ly_type=="cart"){
							this.delcart()
						}
						if(this.orderData.order_type==1){
							let data = {
								id:res.data.id,
								x_total_price:res.data.x_total_price,
								order_no:res.data.order_no,
								arrears_price:res.data.arrears_price
							}
							uni.redirectTo({
								url:"/pages/shoppingCart/pay?data=" + encodeURIComponent(JSON.stringify(data))
							})
						}else{
							httpRequest.toast(res.msg)
							setTimeout(()=>{
								uni.navigateBack(1)
							},500)
						}
					}else{
						httpRequest.toast(res.msg)
					}
				})

			},
			// 删除购物车
			delcart() {
				let _this = this;
				let arr = []
				this.orderData.data.forEach(item => {
					arr.push({
						goods_id: item.goods_id,
						sku_id: item.goods_sku_id
					})
				})
				httpRequest.request('/customapi/cart/delCart', 'POST', {
					data: arr,
				}).then(res => {
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	/deep/.u-radio-group {
		flex: none !important;
	}
	.textarea {
		box-sizing: border-box;
		width: 100%;
		background-color: #F8F8F8;
		height: 150rpx;
	}
	.color1 {
		color: #999999 !important;
	}

	.color {
		color: #FF0000 !important;
	}

	.box {
		padding: 30rpx;

		.btn {
			margin-top: 30rpx;
			text-align: center;
			padding: 29rpx 0;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #FFFFFF;
			border-radius: 50rpx;
			background-color: #F5AC4F;
		}

		.anyone {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 40rpx;
			margin-top: 30rpx;

			.anyone2 {
				display: flex;
				justify-content: space-between;
				margin-top: 23rpx;
				font-size: 32rpx;
				font-weight: 800;
				font-family: PingFang SC;

				.anyone2Left {
					color: #999999;
				}

				.anyone2Right {
					display: flex;

					.anyone2Right1 {
						color: #f5ac4f !important;
					}
				}
			}

			.item2 {
				margin-bottom: 20rpx;

				.item2Right {
					flex-grow: 1;

					.item2RightTop {
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #333333;
						display: inline-block;

						.t3 {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
						}

						.k1 {
							.t1 {
								display: inline-block;
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 800;
								color: #ffffff;
								background-color: #f5ac4f;
								border-radius: 7rpx;
								padding: 3rpx;
							}

							.t2 {
								display: inline-block;
								font-size: 28rpx;
								font-family: PingFang SC;
								color: #333333 !important;
							}
						}
					}

					.item2RightBottom {
						display: flex;
						justify-content: space-between;
						margin-top: 30rpx;

						.item2RightBottomLeft {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 800;
							color: #999999;
						}
					}
				}

				.item2Left {
					margin-right: 31rpx;
					border-radius: 20rpx;
					view {
						position: relative;
						image {
							border-radius: 20rpx;
							width: 180rpx;
							height: 180rpx;
						}
						.item2Left1 {
							position: absolute;
							top: 0;
							left: 0;
							background-color: #FF0000;
							border-radius: 25rpx 0rpx 25rpx 0rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 800;
							color: #FFFFFF;
							padding: 7rpx;
						}
					}
				}
			}
		}

		.mainpadding {
			padding: 30rpx;
		}

		.ffffff {
			background: #ffffff;
		}

		.item1 {
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			background: #ffffff;
			border-radius: 20rpx;
			align-items: center;

			.item1Left {
				flex-direction: column;
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #999999;

				.name {
					color: #333333;
				}

				.address {
					margin: 20rpx 0;

					image {
						width: 27rpx;
						height: 27rpx;
						margin-left: 10rpx;
					}
				}
			}

			.item1Right {}
		}
	}

	.item2RightBottomRight {
		color: #ff0000;
		font-size: 32rpx;
	}

	.sheetBoxChild {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		padding: 0 30rpx;
		margin: 50rpx 0;

		.sheetLeft {
			margin-left: 50rpx;
			margin-top: 50rpx;
		}

		.sheetRight {
			overflow: hidden;
			position: relative;

			image {
				width: 500rpx;
				height: 200rpx;
			}

			.floatmata {
				.floatmata_left {
					position: absolute;
					top: 50rpx;
					left: 50rpx;
					color: #FFFFFF;

					text {
						font-size: 72rpx;
					}
				}

				.floatmata_right {
					position: absolute;
					top: 70rpx;
					right: 50rpx;
					color: #FFFFFF;

					.floatmata_right_top {
						font-size: 28rpx;
						padding-bottom: 10rpx;
					}

					.floatmata_right_bottom {
						font-size: 28rpx;
					}
				}
			}
		}
	}

	.van-action-sheet__cancel {
		background-color: #f5ac4f !important;
		color: #ffffff !important;
		border-radius: 20px;
	}

	.kongtu {
		width: 250rpx;
		padding: 60rpx 0;
		margin: 0 auto;

		image {
			width: 100%;
		}
	}

	.kongtext {
		text-align: center;
		font-size: 36rpx;
		color: #999999;
		padding: 20rpx 0;
	}

	.paybox {
		width: 660rpx;
		margin: 30rpx auto;
		padding: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;

		.paybottom {
			padding: 0 10rpx 10rpx;

			.payitem {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				padding: 10rpx 0;

				.textsize {
					font-size: 32rpx;
				}

				.txts {
					padding-bottom: 0;
					padding-top: 10rpx;
				}

				.littlejifen {
					font-size: 28rpx;
				}

				.littletwo {
					font-size: 32rpx;
				}

				image {
					margin-left: 28rpx;
					width: 12rpx;
					height: 24rpx;
				}

				.littlethree {
					color: #999999;
					font-size: 32rpx;
				}

				label {
					margin-right: -4rpx;
				}
			}
		}
	}

	.wxpay {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding: 10rpx 10rpx 0;

		.wxpayleft {
			font-size: 30rpx;
			padding: 16rpx 0;
		}
	}

	.titletext {
		font-size: 32rpx;
		font-weight: bold;

	}

	.hongbao {
		margin-bottom: 30rpx;
		font-size: 32rpx;

		.top {
			background: linear-gradient(to right, #ff6f89, #ff4860);
			padding: 30rpx 40rpx;
			display: flex;
			justify-content: space-between;
			color: #ffffff;
			border-radius: 8px;
			position: relative;

			.p1 {
				position: absolute;
				bottom: 50%;
				left: -50rpx;
				transform: translate(50%, 50%);
				background-color: rgb(245, 245, 245);
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
			}

			.p2 {
				position: absolute;
				bottom: 50%;
				right: 0rpx;
				transform: translate(50%, 50%);
				background-color: rgb(245, 245, 245);
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
			}

			.topLeft {
				display: flex;
				justify-content: space-between;

				.t1 {
					font-size: 65rpx;
				}

				.t1right {
					flex-direction: column;
					display: flex;
					justify-content: space-around;
					margin-left: 20rpx;

					.r1 {
						font-size: 38rpx;
					}

					.r2 {}
				}
			}


		}

		.bottom {
			background-color: #ffffff;
			padding: 30rpx 0;
			text-align: center;
			border-radius: 8px;
			color: #ff4961;
			font-size: 32rpx;
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.2);
		}
	}

	.topRight {
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.t1 {
			font-size: 24rpx;
		}
	}

	.fw {
		font-weight: 900;
	}

	.scroll-Y {
		padding: 30rpx;
		height: 800rpx;
		box-sizing: border-box;
		width: 100%;
	}
</style>